import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Row, Col, InputNumber, Form, DatePicker, Checkbox, Avatar, AutoComplete, Popconfirm, Modal, Select, Input, Divider } from 'antd';
import styles from './styles.less';
const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker } = DatePicker;

import { SimplePinYin } from '@/utils/pinyin';


const ModelName = "mbl";
@connect(({ loading, port, user }) => ({
  users: user.list,
  loading: loading.models[ModelName],
  sourcePorts: port.list.filter(r => r.portType === 1),
  targetPorts: port.list.filter(r => r.portType === 2),
}))
@Form.create()
class Comp extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      current: {}
    }

    const { getInstance } = props;
    if (typeof getInstance === 'function') {
      getInstance(this);
    }
  }

  componentDidMount() {
    this.setState({ current: this.props.bill });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.bill !== this.props.bill) {
      this.setState({ current: nextProps.bill });
    }
  }

  handleTargetPortChange(value) {
    const { current } = this.state;
    const { targetPorts } = this.props;

    this.setState({
      current: {
        ...current,
        portOfDelivery: targetPorts.find(r => Number(r.id) === Number(value)).objectName,
      }
    })
  }

  render() {
    const { form: { getFieldDecorator }, users } = this.props;
    const { sourcePorts, targetPorts } = this.props;
    const { visible, onOk, onCancel } = this.props;
    const { current } = this.state;

    const formLayout = {
      labelCol: {
        xs: { span: 6 },
        sm: { span: 6 },
        lg: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 16 },
        sm: { span: 16 },
        lg: { span: 16 },
      },
      style: {
        marginBottom: '1.5em',
      },
    };

    const colSpanLayout = {
      xs: 24,
      md: 12,
      lg: 8,
    };

    return (<Modal
      title={'编辑'}
      width={900}
      destroyOnClose
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      okButtonProps={{ disabled: current && current.isLock === 1 }}
    >
      <Form onSubmit={this.handleSubmit} className={styles.editForm}>
        <Row>
          <Col {...colSpanLayout}>
            <FormItem label="单号" {...formLayout}>
              {getFieldDecorator('objectNumber', {
                rules: [{ required: true, message: '请输入单号' }],
                initialValue: current && current.objectNumber ? current.objectNumber : '',
              })(<Input />)}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="船名航次" {...formLayout}>
              {getFieldDecorator('shipName', {
                initialValue: current ? current.shipName : '',
              })(<Input />)}
            </FormItem>
          </Col>
          {/* <Col {...colSpanLayout}>
            <FormItem label="航次" {...formLayout}>
              {getFieldDecorator('shipNumber', {
                initialValue: current ? current.shipNumber : '',
              })(<Input />)}
            </FormItem>
          </Col> */}
          <Col {...colSpanLayout}>
            <FormItem label="年月" {...formLayout}>
              {getFieldDecorator('yearMonth', {
                initialValue:
                  current && current.year && current.year > 0 && current.month && current.month > 0
                    ? moment(`${current.year}-${current.month}`)
                    : undefined,
              })(<MonthPicker style={{ width: '100%' }} />)}
            </FormItem>
          </Col>

          <Col {...colSpanLayout}>
            <FormItem label="起运港" {...formLayout}>
              {getFieldDecorator('sourcePortId', {
                initialValue: current ? String(current.sourcePortId) : '',
              })(
                <Select
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {sourcePorts.map(p => (
                    <Option key={p.id}>{p.objectName}</Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="目的港" {...formLayout}>
              {getFieldDecorator('targetPortId', {
                initialValue: current ? String(current.targetPortId) : '',
              })(
                <Select
                  showSearch
                  optionFilterProp="children"
                  onChange={(value) => this.handleTargetPortChange(value)}
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {targetPorts.map(p => (
                    <Option key={p.id}>{p.objectName}</Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="目的地" {...formLayout}>
              {getFieldDecorator('portOfDelivery', {
                initialValue: current ? current.portOfDelivery : '',
              })(<Input />)}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="业务员" {...formLayout}>
              {getFieldDecorator('userId', {
                initialValue: current ? current.userId : '',
              })(
                <Select
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {users.map(item => (
                    <Option key={item.id}>{item.realName}</Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="ETD" {...formLayout}>
              {getFieldDecorator('etd', {
                initialValue: current && current.etd ? moment(current.etd) : null,
              })(<DatePicker />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
    );

  }
}

export default Comp;

